<template>
  <div>
    <div class="gva-search-box icey_bg">

      <el-form ref="searchForm" :model="searchForm">
        <el-row>
          <el-col :span="6">
            <el-form-item prop="search" label="关键字">
              <el-input v-model="searchForm.search" placeholder="请输入关键字查询" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="taskField" label="任务ID">
              <el-input v-model="searchForm.taskField" placeholder="任务ID" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否存在漏洞">
              <el-select v-model="vulFields" placeholder="" style=" width: 120px" clearable>
                <el-option value="是">是</el-option>
                <el-option value="否">否</el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-button type="primary" @click="searchResults" icon="Search" style="margin-left: 10px">
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>

      <div>
        <el-table :data="taskData">
          <el-table-column type="expand">
            <template #default="props">
             <div style="background-color: #8c939d">
               <el-descriptions border column="1">
                 <el-descriptions-item
                     label="URL"
                     label-align="right"
                     align="center"
                     class-name="my-content"
                 >{{props.row.detail.target }}</el-descriptions-item>
                 <el-descriptions-item
                     label="额外说明"
                     label-align="right"
                     align="center"
                     class-name="my-content"
                 >{{props.row.detail.output}}</el-descriptions-item>
                 <el-descriptions-item
                     label="Request1"
                     label-align="right"
                     align="center"
                     class-name="my-content"
                     v-for="(item, index) in props.row.detail.req_msg" :key="index"
                 >
                   <ul>
                     <li >
                       {{ item }}
                     </li>
                   </ul>
                 </el-descriptions-item>
                 <el-descriptions-item
                     label="Response1"
                     label-align="right"
                     align="center"
                     class-name="my-content"
                     v-for="(item, index) in props.row.detail.resp_msg" :key="index"
                 >
                   <ul>
                     <li >
                       {{ item }}
                     </li>
                   </ul>
                 </el-descriptions-item>
               </el-descriptions>
             </div>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" width="60"/>
          <el-table-column align="left" label="结果ID" min-width="40" prop="id">
          </el-table-column>
          <el-table-column align="left" label="插件ID" min-width="40" prop="plugin_id">
          </el-table-column>
          <el-table-column align="left" label="插件名称" min-width="40" prop="plugin_name">
          </el-table-column>
          <el-table-column align="left" label="任务ID" min-width="40" prop="task_id">
          </el-table-column>
          <el-table-column align="left" label="存在漏洞" min-width="40" prop="vul">
            <template #default="scope">
              <div v-if="scope.row.vul">
                <el-tag
                    class="mx-1"
                    type="danger"
                    effect="light">
                  存在
                </el-tag>
              </div>
              <div v-if="!scope.row.vul">
                <el-tag
                    class="mx-1"
                    type="success"
                    effect="light">
                  否
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button
                  icon="delete"
                  size="small"
                  type="primary"
                  link
                  @click="deleteResultFunc(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination
              :current-page="page"
              :page-size="pagesize"
              :page-sizes="[15, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {deleteResult, deleteTask, getResultList} from "@/api/my/loophole/task";
import {ElMessage} from "element-plus";

export default {
  name: "resultList",
  data() {
    return {
      searchForm: {
        search: undefined,
        taskField: undefined,
        vulField: undefined,
      },
      vulFields : '',
      page: 1,
      pagesize: 15,
      total: 0,
      taskData: [],
    }
  },
  mounted() {
    this.searchResults()

  },

  methods: {

    searchResults() {
      if (this.vulFields != ''){
        if (this.vulFields == '是'){
          this.searchForm.vulField = 1
        } else if (this.vulFields == '否') {
          this.searchForm.vulField = 0
        }
      }
      getResultList({
        ...this.searchForm,
        page: this.page,
        pagesize: this.pagesize,
      }).then(resp => {
        if (resp.code == 0){
          this.taskData = resp.data.data
          this.total = resp.data.total
        }
      })

    },
    deleteResultFunc(item) {
      console.log(item)
      if (confirm("确定删除结果ID：" + item.id + " ?")) {
        // 用户单击了“确认”按钮，执行删除操作
        deleteResult(item.id).then(res => {
          if (res.code == 0) {
            ElMessage.success('删除成功！')
            this.searchResults()
            return
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pagesize = val
      this.searchResults()
    },
    handleCurrentChange(val) {
      this.page = val
      this.searchResults()
    },
  },
}
</script>

<style scoped>

</style>